<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="../AmazeUI-2.4.2/assets/css/amazeui.css"/>
    <link href="../css/dlstyle.css" rel="stylesheet" type="text/css">
	<script src="./AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
	<script src="./AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
	<script src="./js/plugins/axios.js"></script>
	<script src="./js/plugins/vue.js"></script>
	<script>
		//配置axios的前缀
		axios.defaults.baseURL='http://localhost:8080/'
		//把axios配置为全局变量
		Vue.prototype.$http = axios //给Vue这个类添加一个原型的属性,这个类的对象都能调用
		//屏蔽vue的警告
		Vue.config.productionTip = false
	</script>
	<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
	<script src="element-ui/lib/index.js"></script>
</head>

<body>
<div id = "app">

	<div class="login-boxtitle">
		<a href="home.html"><img alt="logo" src="../images/logobig.png"/></a>
	</div>

	<div class="login-banner">
		<div class="login-main">
			<div class="login-banner-bg"><span></span><img src="../images/big.jpg"/></div>
			<div class="login-box">

				<h3 class="title">登录商城</h3>

				<div class="clear"></div>

				<div class="login-form">
					<form>
						<div class="user-name">
							<label for="user"><i class="am-icon-user"></i></label>
							<input type="text" name="" id="user" v-model="msgform.phone" placeholder="手机号">
						</div>
						<div class="verification">
							<label for="code"><i class="am-icon-code-fork"></i></label>
							<input type="tel" name="" id="code" v-model='msgform.phoneCode' placeholder="请输入手机验证码">
							<button  class="btn" type="button" href="javascript:void(0);" @click="sendMobileCode"
									 id="sendMobileCode">
								获取</button >
						</div>
					</form>
				</div>

				<div class="login-links">
					<label for="remember-me"><input id="remember-me" type="checkbox">记住密码</label>
					<a href="#" class="am-fr">忘记密码</a>
					<a href="register.html" class="zcnext am-fr am-btn-default">注册</a>
					<br/>
				</div>
				<div class="am-cf">
					<input type="submit" name="" value="登 录" @click="loginPhone" class="am-btn am-btn-primary am-btn-sm">
				</div>
				<div class="partner">
					<h3>合作账号</h3>
					<div class="am-btn-group">
						<li><a href="#"><i class="am-icon-qq am-icon-sm"></i><span>QQ登录</span></a></li>
						<li><a href="#"><i class="am-icon-weibo am-icon-sm"></i><span>微博登录</span> </a></li>
						<li><a href="#"><i class="am-icon-weixin am-icon-sm"></i><span>微信登录</span> </a></li>
						<li><a href="phoneLogin.html"><i class="am-icon-send-o am-icon-sm"></i><span>短信登录</span> </a>
						</li>
					</div>
				</div>

			</div>
		</div>
	</div>
	<div class="footer ">
		<div class="footer-hd ">
			<p>
				<a href="# ">恒望科技</a>
				<b>|</b>
				<a href="# ">商城首页</a>
				<b>|</b>
				<a href="# ">支付宝</a>
				<b>|</b>
				<a href="# ">物流</a>
			</p>
		</div>
		<div class="footer-bd ">
			<p>
				<a href="# ">关于恒望</a>
				<a href="# ">合作伙伴</a>
				<a href="# ">联系我们</a>
				<a href="# ">网站地图</a>
				<em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank"
														   title="模板之家">模板之家</a> - Collect from <a
						href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
			</p>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data:{
			msgform:{
				phone:'',
				phoneCode:''
			}
		},
		methods:{
			sendMobileCode(event){
				if (!this.msgform.phone){
					this.$notify({
						title: '警告',
						message: '手机号不能为空',
						type: 'warning'
					});
					return
				}
				//获取按钮
				var btn = $(event.target);
				btn.attr("disabled",true)
				var param = {
					phone: this.msgform.phone
				};
				this.$http.post("/vcode/sendSmsCode",param).then(res=>{
					var ajaxResult = res.data;
					if (ajaxResult.success){
						this.$notify({
							title: '成功',
							message: '手机验证码已经发送到您的手机，请在3分钟内使用',
							type: 'success'
						});
						//设置时间
						var time = 60;
						var interval = window.setInterval(function (){
							//过一秒时间减一
							time = time - 1;
							//将时间显示到按钮
							btn.html(time)
							if(time <= 0){
								btn.html("获取");
								btn.attr("disabled",false);
								//清除定时器
								window.clearInterval(interval);
							}
						},1000)
					}else{
						//4.3.发送失败：提示，恢复按钮
						btn.attr("disabled",false);
						this.$notify.error({
							title: '提示',
							message: ajaxResult.msg
						});
					}
				})
			},
			loginPhone(){
				if (!this.msgform.phone){
					this.$notify({
						title: '警告',
						message: '手机号不能为空',
						type: 'warning'
					});
					return
				}
				if (!this.msgform.phoneCode){
					this.$notify({
						title: '警告',
						message: '手机验证码不能为空',
						type: 'warning'
					});
					return
				}
				this.$http.post("/login/msg",this.msgform).then(result=>{
					location.href = "frame.html"
				})
			}
		},
		mounted(){

		}
	})
</script>
</html>